<template>
    <page-header-wrapper>
        <a-card :bordered="false">
<!--            <div class="table-page-search-wrapper">-->
<!--                <a-form layout="inline">-->
<!--                    <a-row :gutter="48">-->
<!--                        <a-col :md="8" :sm="24">-->
<!--                            <a-form-item label="供應商編號">-->
<!--                                <a-input v-model="queryParam.id" placeholder=""/>-->
<!--                            </a-form-item>-->
<!--                        </a-col>-->
<!--                        <a-col :md="8" :sm="24">-->
<!--                            <a-form-item label="状态">-->
<!--                                <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">-->
<!--                                    <a-select-option value="0">全部</a-select-option>-->
<!--                                    <a-select-option value="1">关闭</a-select-option>-->
<!--                                    <a-select-option value="2">运行中</a-select-option>-->
<!--                                </a-select>-->
<!--                            </a-form-item>-->
<!--                        </a-col>-->
<!--                        <template v-if="advanced">-->
<!--                            <a-col :md="8" :sm="24">-->
<!--                                <a-form-item label="调用次数">-->
<!--                                    <a-input-number v-model="queryParam.callNo" style="width: 100%"/>-->
<!--                                </a-form-item>-->
<!--                            </a-col>-->
<!--                            <a-col :md="8" :sm="24">-->
<!--                                <a-form-item label="更新日期">-->
<!--                                    <a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>-->
<!--                                </a-form-item>-->
<!--                            </a-col>-->
<!--                            <a-col :md="8" :sm="24">-->
<!--                                <a-form-item label="使用状态">-->
<!--                                    <a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">-->
<!--                                        <a-select-option value="0">全部</a-select-option>-->
<!--                                        <a-select-option value="1">关闭</a-select-option>-->
<!--                                        <a-select-option value="2">运行中</a-select-option>-->
<!--                                    </a-select>-->
<!--                                </a-form-item>-->
<!--                            </a-col>-->
<!--                            <a-col :md="8" :sm="24">-->
<!--                                <a-form-item label="使用状态">-->
<!--                                    <a-select placeholder="请选择" default-value="0">-->
<!--                                        <a-select-option value="0">全部</a-select-option>-->
<!--                                        <a-select-option value="1">关闭</a-select-option>-->
<!--                                        <a-select-option value="2">运行中</a-select-option>-->
<!--                                    </a-select>-->
<!--                                </a-form-item>-->
<!--                            </a-col>-->
<!--                        </template>-->
<!--                        <a-col :md="!advanced && 8 || 24" :sm="24">-->
<!--              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">-->
<!--                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>-->
<!--                <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>-->
<!--                <a @click="toggleAdvanced" style="margin-left: 8px">-->
<!--                  {{ advanced ? '收起' : '展开' }}-->
<!--                  <a-icon :type="advanced ? 'up' : 'down'"/>-->
<!--                </a>-->
<!--              </span>-->
<!--                        </a-col>-->
<!--                    </a-row>-->
<!--                </a-form>-->
<!--            </div>-->
            <div class="table-operator">
                <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button>
<!--                <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">-->
<!--                    <a-menu slot="overlay">-->
<!--                        <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>-->
<!--                        &lt;!&ndash; lock | unlock &ndash;&gt;-->
<!--                        <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>-->
<!--                    </a-menu>-->
<!--                    <a-button style="margin-left: 8px">-->
<!--                        批量操作 <a-icon type="down" />-->
<!--                    </a-button>-->
<!--                </a-dropdown>-->
            </div>
            <s-table
                ref="table"
                size="default"
                rowKey="key"
                :columns="columns"
                :data="loadData"
                :alert="true"
                :rowSelection="rowSelection"
                showPagination="auto">
                <span slot="serial" slot-scope="text, record, index">
                  {{ index + 1 }}
                </span>
                <span slot="action" slot-scope="text, record">
                  <template>
                    <a @click="handleEdit(record)">编辑</a>
                  </template>
                </span>
            </s-table>

            <create-form
                    ref="createModal"
                    :visible="visible"
                    :loading="confirmLoading"
                    :model="mdl"
                    @cancel="handleCancel"
                    @ok="handleOk"
            />
        </a-card>
    </page-header-wrapper>
</template>

<script>
    import moment from 'moment'
    import { STable, Ellipsis } from '@/components'
    import StepByStepModal from '../general/modules/StepByStepModal'
    import CreateForm from './forms/Notice'
    import { _get } from '@/api/Notice'

    export default {
        name: 'TableList',
        components: {
            STable,
            Ellipsis,
            CreateForm,
            StepByStepModal
        },
        data () {
            this.columns = [
              {
                title: 'Id',
                dataIndex: 'idNot'
              },
              {
                title: '標題',
                dataIndex: 'title'
              },
              {
                title: '內容',
                dataIndex: 'content'
              },
              {
                title: '創建時間',
                dataIndex: 'createTime',
                customRender: date => {
                  return this.$options.filters.formatDate(date)
                }
              },
              {
                title: '操作',
                dataIndex: 'action',
                width: '150px',
                scopedSlots: { customRender: 'action' }
              }
            ]
            return {
                // create model
                visible: false,
                confirmLoading: false,
                mdl: null,
                // 高级搜索 展开/关闭
                advanced: false,
                // 查询参数
                queryParam: {},
                // 加载数据方法 必须为 Promise 对象
                loadData: parameter => {
                    const requestParameters = Object.assign({ draw: 1 }, parameter, this.queryParam)
                    console.log('loadData request parameters:', requestParameters)
                    return _get(requestParameters)
                        .then(res => {
                            const result = res.data
                            const results = {
                                pageSize: requestParameters.pageSize,
                                pageNo: requestParameters.pageNo,
                                totalCount: result.recordsTotal,
                                totalPage: 4,
                                data: result.data
                            }
                            console.log(results)
                            return results
                        })
                },
                selectedRowKeys: [],
                selectedRows: []
            }
        },
        filters: {
        },
        created () {
        },
        computed: {
            rowSelection () {
                return {
                    selectedRowKeys: this.selectedRowKeys,
                    onChange: this.onSelectChange
                }
            }
        },
        methods: {
            handleAdd () {
                this.mdl = null
                this.visible = true
            },
            handleEdit (record) {
                this.visible = true
                this.mdl = { ...record }
            },
            handleCancel () {
                this.visible = false
                this.$refs.table.refresh() // 刷新表格
                const form = this.$refs.createModal.form
                form.resetFields() // 清理表单数据（可不做）
            },
            handleDelete (record) {
            },
            onSelectChange (selectedRowKeys, selectedRows) {
                this.selectedRowKeys = selectedRowKeys
                this.selectedRows = selectedRows
            },
            toggleAdvanced () {
                this.advanced = !this.advanced
            },
            resetSearchForm () {
                this.queryParam = {
                    date: moment(new Date())
                }
            }
        }
    }
</script>
